<template>
    <div class="container">

        <el-row :gutter="10">
            <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" :offset="3">
                <div class="option">
                    <ul>
                        <li>
                            <el-button size="large" type="info" circle @click="goback">
                                <el-icon>
                                    <DArrowLeft />
                                </el-icon>
                            </el-button>
                        </li>
                        <li>
                            <el-button size="large" :class="clickmoreindex == index ? 'arrowtoleft1' : ''" type="info"
                                circle @click="onCollect">
                                <el-badge :value="content.collects" color="#a5a5a5" :offset="[10, -10]" :max="99">
                                    <el-icon size="16" v-if="iscollect">
                                        <StarFilled />
                                    </el-icon>
                                    <el-icon v-else>
                                        <Star />
                                    </el-icon>
                                </el-badge>
                            </el-button>
                        </li>
                        <li>
                            <el-button size="large" @click="toTop('textarea')"
                                :class="clickmoreindex == index ? 'arrowtoleft1' : ''" type="info" circle>
                                <el-badge :value="comment.length" color="#a5a5a5" :offset="[10, -10]" :max="99">
                                    <el-icon>
                                        <ChatDotSquare />
                                    </el-icon></el-badge>
                            </el-button>

                        </li>
                        <li>
                            <el-button size="large" :class="clickmoreindex == index ? 'arrowtoleft1' : ''" type="info"
                                circle @click="clickyes">
                                <el-badge :value="content.like" color="#a5a5a5" :offset="[10, -10]" :max="99">
                                    <el-icon>
                                        <Pointer />
                                    </el-icon>
                                </el-badge>
                            </el-button>
                        </li>

                        <el-button size="large" @click="toTop('part1')"
                            :class="clickmoreindex == index ? 'arrowtoleft1' : ''" circle>
                            <el-icon>
                                <ArrowUpBold />
                            </el-icon>
                        </el-button>
                    </ul>

                </div>
            </el-col>
            <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="middle-card" id="part1">
                    <div class="article">
                        <div class="article-top">
                            <div class="title">{{ content.title }}</div>
                            <div class="title-tip">
                                <div class="time">{{ content.create_time }}</div>
                                <div class="read">阅读量{{ content.read }}</div>
                            </div>

                        </div>
                        <div class="content" ref="containerRef" v-html="content.content"></div>
                    </div>

                    <div class="card-bottom">
                        <div class="textarea" id="textarea">
                            评论 {{ comment.length }}
                            <textarea v-model="textarea" maxlength="300" rows="4" cols="50" placeholder="去发布~" />
                            <el-button @click="onRelease">发布</el-button>
                            <el-button @click="textarea = ''">取消</el-button>
                        </div>
                        <div class="comment">
                            <ul>
                                <li v-for="item, index in comment" :key="item.id">
                                    <div class="avatar">
                                        <el-avatar :size="50" :src="item.user.avatarUrl" />
                                        <div class="username">{{ item.user.username }}</div>
                                    </div>
                                    <div class="comment-content">
                                        {{ item.content }}
                                    </div>
                                    <div class="comment-bottom">
                                        <div class="comment-time">{{ item.create_time }}</div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>

                </div>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="6" :xl="6">
                <div class="container-right">
                    <div class="userinfo">
                        <div class="avatar">
                            <el-avatar :size="50" :src="content.user.avatarUrl" />
                            <div class="avatar-left">
                                <div class="username">{{ content.user.username }}</div>
                                <div class="description">{{ content.user.description }}</div>
                            </div>
                        </div>
                        <div class="focus">
                            <el-button @click="switchfocus(content.user.userid)" type="primary"
                                :plain="content.user.isfouces">
                                {{ content.user.isfouces ? '已关注' : '关注' }}
                            </el-button>
                        </div>
                    </div>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { v4 as uuidv4 } from 'uuid';
import { commonAjax } from '@/util/request.js'
import { ref, nextTick, onMounted } from 'vue'
import { getDateTime } from '@/util/time.js'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const articleid = ref(route.query.articleid)
const iscollect = ref(false)
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
const textarea = ref('')
const comment = ref([])
const content = ref({ user: {} })
const containerRef = ref(null)
const focusList = ref()
const goback = () => {
    router.go(-1)
}
const toTop = (id) => {
    var target = document.getElementById(id);
    target.scrollIntoView({ behavior: 'smooth' })
}
const isFollowing = () => {

    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/focus/isFollowing`,
            data: {
                follower_id: userInfo.value.userid,
                following_id: content.value.user.userid
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    content.value.user.isfouces = result.data
                    resolve()
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
const switchfocus = (userid) => {
    console.log(content.value.user.userid, 'data', {
        follower_id: userInfo.value.userid,
        following_id: content.value.user.userid
    });

    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/focus/follow`,
            data: {
                follower_id: userInfo.value.userid,
                following_id: content.value.user.userid
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    content.user.isfouces = !content.user.isfouces
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
const onCollect = () => {
    iscollect.value = !iscollect.value
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/collect/add`,
            data: {
                collectid: uuidv4(),
                userid: userInfo.value.userid,
                articleid: content.value.articleid,
                iscollect: iscollect.value
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
const onRelease = () => {
    console.log(userInfo.value);

    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/comment/add`,
            data: {
                userid: userInfo.value.userid,
                articleid: content.value.articleid,
                content: textarea.value
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    if (textarea.value) {
                        comment.value.unshift(result.data)
                        textarea.value = ''
                    }
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })

}
const clickyes = (articleid) => {
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/article/like`,
            data: {
                articleid: content.value.articleid
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    content.value.like++
                    ElMessage.success('点赞成功')
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}

const getDetail = () => {
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/article/findOne`,
            data: {
                articleid: articleid.value,
                userid: userInfo.value.userid
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    content.value = result.data
                    iscollect.value = result.data.iscollect == 1 ? true : false
                    resolve()
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
const getComment = () => {
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/comment/findAllbyarticle`,
            data: {
                articleid: articleid.value
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    comment.value = result.data
                    resolve()
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
onMounted(async () => {
    await getComment()
    await getDetail()
    await isFollowing()
})


</script>

<style lang="scss" scoped>
@import './css/detail.scss'
</style>